<template>
    <div>
        <el-card style="">
          <div style="display: flex;justify-content: space-between;">
              <div style="font-size: 24px;font-weight: bold;">设置微信</div>
              <div><el-button type="primary" @click="dialog_add = true">+ 添加</el-button></div>
          </div>
          <div style="margin-top: 30px;padding:0 20px">
            <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px" v-for="(item,index) in dataList">
              <div style="margin-right: 10px;font-size: 14px;width: 150px;">
                {{item.wechatName}}
              </div>
              <div>
                <el-image style="width: 100px; height: 100px" :src="baseURL_dev+item.wechatImageUrl" />
                  <!-- <el-upload
                    class="avatar-uploader"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </el-upload> -->
              </div>
              <div style="margin-left: 50px;">
                      <el-button @click="del(item)"><el-icon :size="16" color="red"><RemoveFilled /></el-icon><span style="margin-left: 5px;">移除</span></el-button>
                    </div>
            </div>
          </div>
        </el-card>

        <el-dialog v-model="dialog_add" title="新增" width="800">
        <div>
          <div style="margin-left: 30px;display: flex;align-items: center;">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;">
              标题
            </div>
            <el-input v-model="addForm.wechatName" style="width: 240px;border-radius: 0" placeholder=""></el-input>
          </div>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;">
              图片
            </div>
            <div>
                <el-upload
                  class="avatar-uploader"
                  :action="baseURL_dev+'/common/upload'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </div>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialog_add = false">取消</el-button>
            <el-button type="primary" @click="addUser()">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
    import '@wangeditor/editor/dist/css/style.css' // 引入 css
    import { onBeforeUnmount, shallowRef,onMounted,ref } from 'vue'
    import { ElMessage, ElMessageBox,ElNotification } from 'element-plus'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import { baseURL_dev } from '../../config/baseUrl'
    import { Plus } from '@element-plus/icons-vue'
    import type { UploadProps } from 'element-plus'
    import { $WechatList,$WechatAdd,$WechatEdit,$WechatDel } from '../../api/base'

    onMounted(()=>{
      loadList()
    })

    let dataList = ref([])
    let form = ref({})
    form.caseName = ''
    form.pageNum = 1,
    form.pageSize = 10

    let dialog_add = ref(false)
    let dialog_edit = ref(false)
    let addForm = ref({})
    let editForm = ref({})

    let user = ref('')
    const currentPage4 = ref(1)
    const small = ref(false)
    const disabled = ref(false)
    const background = ref(false)

    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`)
      form.value.pageSize = val
      loadList()
    }
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`)
      form.value.pageNum = val
      loadList()
    }

    const loadList = async ()=>{
      console.log(form.value)
      let ret = await $WechatList(form.value)
      console.log(ret)
      user.value = ret
      dataList.value = ret.rows
    }

    const addUser = async ()=>{
      let res = ref({})
      console.log(addForm.value)
      res = await $WechatAdd(addForm.value)
      console.log('res',res)
      if(res.code==0){
        loadList()
        dialog_add.value = false
      }
    }

    const imageUrl = ref('')

    const handleAvatarSuccess: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      // console.log(baseURL_dev)
      console.log('response',response)
      console.log('uploadFile',uploadFile)
      addForm.value.wechatImageUrl = response.fileName
    }

    const handleAvatarSuccess2: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      editForm.value.wechatImageUrl = response.fileName
    }

    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
      if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
      }
      return true
    }

    const del = async (row)=>{
      console.log(row)
      ElMessageBox.confirm(
        '您确定要删除这条数据吗？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(async() => {
          let del = {}
          del.wechatIds = row.wechatId
          console.log('del',del)
          let res = ref({})
          res = await $WechatDel(del)
          console.log('res',res)
          if(res.code==0){
            // ElNotification({
            //     title:'通知',
            //     message: res.message,
            //     type:'success'
            // })
            loadList()
          }
        })
        .catch(() => {
        })
    }

    const addorRef = shallowRef()
    const addorConfig = { placeholder: '请输入内容...' }
    const handleCreated1 = (editor) => {
      addorRef.value = editor // 记录 editor 实例，重要！
    }

    const editorRef = shallowRef()
    const editorConfig = { placeholder: '请输入内容...' }
    const handleCreated2 = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
  </script>
  
  <style scoped lang="less">
  .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  </style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>